<template>
  <div class="process-management">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>工艺管理</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="showAddProcessDialog">添加工艺</el-button>
      </div>
      
      <el-table :data="processList" border style="width: 100%">
        <el-table-column prop="processId" label="工艺ID" width="100"></el-table-column>
        <el-table-column prop="processName" label="工艺名称" width="150"></el-table-column>
        <el-table-column label="工艺参数">
          <template slot-scope="scope">
            <el-tag v-for="(value, index) in scope.row.processValue" :key="index" style="margin-right: 5px;">
              {{ value }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button size="mini" @click="editProcess(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteProcess(scope.row.processId)">删除</el-button>
            <el-button size="mini" type="primary" @click="manageMachine(scope.row)">机台配置</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加/编辑工艺对话框 -->
    <el-dialog :title="processDialogTitle" :visible.sync="processDialogVisible" width="50%">
      <el-form :model="currentProcess" label-width="100px">
        <el-form-item label="工艺ID" v-if="isEditProcess">
          <el-input v-model="currentProcess.processId" disabled></el-input>
        </el-form-item>
        <el-form-item label="工艺名称">
          <el-input v-model="currentProcess.processName"></el-input>
        </el-form-item>
        <el-form-item label="工艺参数">
          <el-tag
            v-for="(value, index) in currentProcess.processValue"
            :key="index"
            closable
            @close="removeProcessValue(index)">
            {{ value }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputProcessValueVisible"
            v-model="inputProcessValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="addProcessValue"
            @blur="addProcessValue">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInputProcessValue">+ 添加参数</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="processDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveProcess">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 机台配置对话框 -->
    <el-dialog title="机台配置" :visible.sync="machineDialogVisible" width="60%">
      <el-button type="primary" @click="showAddMachineDialog" style="margin-bottom: 20px;">添加配置</el-button>
      
      <el-table :data="machineConfigList" border style="width: 100%">
        <el-table-column prop="mnId" label="配置ID" width="100"></el-table-column>
        <el-table-column prop="lineName" label="产线名称" width="150"></el-table-column>
        <el-table-column prop="machineQuantity" label="机台数量" width="150"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="editMachineConfig(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteMachineConfig(scope.row.mnId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 添加/编辑机台配置对话框 -->
      <el-dialog :title="machineDialogTitle" :visible.sync="machineConfigDialogVisible" width="40%" append-to-body>
        <el-form :model="currentMachineConfig" label-width="120px">
          <el-form-item label="配置ID" v-if="isEditMachineConfig">
            <el-input v-model="currentMachineConfig.mnId" disabled></el-input>
          </el-form-item>
          <el-form-item label="工艺名称">
            <el-input v-model="currentProcess.processName" disabled></el-input>
          </el-form-item>
          <el-form-item label="选择产线">
            <el-select v-model="currentMachineConfig.lineId" placeholder="请选择产线">
              <el-option
                v-for="line in lineList"
                :key="line.lineId"
                :label="line.lineName"
                :value="line.lineId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机台数量">
            <el-input-number v-model="currentMachineConfig.machineQuantity" :min="1"></el-input-number>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="machineConfigDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveMachineConfig">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
    
  </div>
</template>

<script>
export default {
  name: 'ProcessManagement',
  data() {
    return {
      // 工艺列表
      processList: [
        {
          processId: 1,
          processName: "PSA",
          processValue: ["贴合温度", "贴合时间"]
        },
        {
          processId: 2,
          processName: "组装",
          processValue: ["组装压力", "组装时间", "定位精度"]
        }
      ],
      
      // 产线列表
      lineList: [
        { lineId: 1, lineName: "产线A" },
        { lineId: 2, lineName: "产线B" },
        { lineId: 3, lineName: "产线C" }
      ],
      
      // 机台配置列表
      machineConfigList: [],
      
      // 工艺对话框相关
      processDialogVisible: false,
      processDialogTitle: "添加工艺",
      isEditProcess: false,
      currentProcess: {
        processId: null,
        processName: "",
        processValue: []
      },
      
      // 工艺参数输入相关
      inputProcessValueVisible: false,
      inputProcessValue: "",
      
      // 机台配置对话框相关
      machineDialogVisible: false,
      machineConfigDialogVisible: false,
      machineDialogTitle: "添加机台配置",
      isEditMachineConfig: false,
      currentMachineConfig: {
        mnId: null,
        processId: null,
        lineId: null,
        machineQuantity: 1
      }
    };
  },
  methods: {
    // 工艺管理相关方法
    showAddProcessDialog() {
      this.processDialogTitle = "添加工艺";
      this.isEditProcess = false;
      this.currentProcess = {
        processId: null,
        processName: "",
        processValue: []
      };
      this.processDialogVisible = true;
    },
    
    editProcess(process) {
      this.processDialogTitle = "编辑工艺";
      this.isEditProcess = true;
      this.currentProcess = JSON.parse(JSON.stringify(process));
      this.processDialogVisible = true;
    },
    
    saveProcess() {
      if (!this.currentProcess.processName) {
        this.$message.error("请输入工艺名称");
        return;
      }
      
      if (this.isEditProcess) {
        // 更新工艺
        const index = this.processList.findIndex(p => p.processId === this.currentProcess.processId);
        if (index !== -1) {
          this.processList.splice(index, 1, JSON.parse(JSON.stringify(this.currentProcess)));
          this.$message.success("工艺更新成功");
        }
      } else {
        // 添加新工艺
        const newId = this.processList.length > 0 
          ? Math.max(...this.processList.map(p => p.processId)) + 1 
          : 1;
        this.currentProcess.processId = newId;
        this.processList.push(JSON.parse(JSON.stringify(this.currentProcess)));
        this.$message.success("工艺添加成功");
      }
      
      this.processDialogVisible = false;
    },
    
    deleteProcess(processId) {
      this.$confirm("确定要删除该工艺吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.processList = this.processList.filter(p => p.processId !== processId);
        this.$message.success("删除成功");
      }).catch(() => {});
    },
    
    // 工艺参数相关方法
    removeProcessValue(index) {
      this.currentProcess.processValue.splice(index, 1);
    },
    
    showInputProcessValue() {
      this.inputProcessValueVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    
    addProcessValue() {
      if (this.inputProcessValue) {
        this.currentProcess.processValue.push(this.inputProcessValue);
      }
      this.inputProcessValueVisible = false;
      this.inputProcessValue = "";
    },
    
    // 机台配置相关方法
    manageMachine(process) {
      this.currentProcess = JSON.parse(JSON.stringify(process));
      this.loadMachineConfigs(process.processId);
      this.machineDialogVisible = true;
    },
    
    loadMachineConfigs(processId) {
      // 模拟从API获取数据
      this.machineConfigList = [
        {
          mnId: 1,
          processId: 1,
          lineId: 1,
          lineName: "产线A",
          machineQuantity: 3
        },
        {
          mnId: 2,
          processId: 1,
          lineId: 2,
          lineName: "产线B",
          machineQuantity: 2
        }
      ].filter(item => item.processId === processId);
    },
    
    showAddMachineDialog() {
      this.machineDialogTitle = "添加机台配置";
      this.isEditMachineConfig = false;
      this.currentMachineConfig = {
        mnId: null,
        processId: this.currentProcess.processId,
        lineId: null,
        machineQuantity: 1
      };
      this.machineConfigDialogVisible = true;
    },
    
    editMachineConfig(config) {
      this.machineDialogTitle = "编辑机台配置";
      this.isEditMachineConfig = true;
      this.currentMachineConfig = JSON.parse(JSON.stringify(config));
      this.machineConfigDialogVisible = true;
    },
    
    saveMachineConfig() {
      if (!this.currentMachineConfig.lineId) {
        this.$message.error("请选择产线");
        return;
      }
      
      // 获取产线名称
      const line = this.lineList.find(l => l.lineId === this.currentMachineConfig.lineId);
      const lineName = line ? line.lineName : "";
      
      if (this.isEditMachineConfig) {
        // 更新配置
        const index = this.machineConfigList.findIndex(m => m.mnId === this.currentMachineConfig.mnId);
        if (index !== -1) {
          const updatedConfig = {
            ...this.currentMachineConfig,
            lineName: lineName
          };
          this.machineConfigList.splice(index, 1, updatedConfig);
          this.$message.success("配置更新成功");
        }
      } else {
        // 添加新配置
        const newId = this.machineConfigList.length > 0 
          ? Math.max(...this.machineConfigList.map(m => m.mnId)) + 1 
          : 1;
        const newConfig = {
          mnId: newId,
          processId: this.currentMachineConfig.processId,
          lineId: this.currentMachineConfig.lineId,
          lineName: lineName,
          machineQuantity: this.currentMachineConfig.machineQuantity
        };
        this.machineConfigList.push(newConfig);
        this.$message.success("配置添加成功");
      }
      
      this.machineConfigDialogVisible = false;
    },
    
    deleteMachineConfig(mnId) {
      this.$confirm("确定要删除该配置吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.machineConfigList = this.machineConfigList.filter(m => m.mnId !== mnId);
        this.$message.success("删除成功");
      }).catch(() => {});
    }
  }
};
</script>

<style scoped>
.process-management {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.el-tag {
  margin-right: 10px;
}

.input-new-tag {
  width: 90px;
  margin-right: 10px;
  vertical-align: bottom;
}
</style>